<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <f:view contentType="text/html">
        <h:head>
            <title>
                <ui:insert name="title">Sem Nome</ui:insert>
            </title>
            <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/#{guestPreferences.theme}/skin.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/roller/ui-darkness/theme.css" />
            <style type="text/css">
                .ui-widget {
                    font-size: 75%;
                }

                .themeMenu {
                    overflow: auto;
                    height:300px;
                    width:200px;
                }
            </style>
        </h:head>

        <h:body>

            <p:growl id="msg" showDetail="true"/>

            <p:layout fullPage="true"
                      toggleListener="#{layoutBean.handleToggle}" onToggleUpdate="msg"
                      closeListener="#{layoutBean.handleClose}" onCloseUpdate="msg"
                      resizeListener="#{layoutBean.handleResize}" onResizeUpdate="msg">

                <p:layoutUnit id="top" position="top" resizable="true" height="150" minHeight="100" maxHeight="175">
                    <h:outputText value="Logo do Site" style="font-size:36px;position:absolute;top:50px;left:100px;"/>
                </p:layoutUnit>

                <p:layoutUnit id="bottom" position="bottom" height="50" zindex="0" scrollable="null">
			Feito por Giliard

                    <br />
                    Logo

                </p:layoutUnit>

                <p:layoutUnit id="right" position="right" width="250" header="Gallery" resizable="true" closable="true" collapsible="true">

                    <h:form id="themeForm">
                        <p:commandButton id="themeButton" value="Change Theme: #{guestPreferences.theme}" onclick="themeMenu.show()" type="button"/>

                    </h:form>

                    <p:lightBox transition="fade" style="text-align:center;margin-top:20px;">
                        <h:outputLink value="#{request.contextPath}/images/nature1.jpg" title="Nature 1" style="margin-bottom:5px;">
                             <h:graphicImage value="/images/nature1_small.jpg"/>
                        </h:outputLink>

                        <h:outputLink value="#{request.contextPath}/images/nature2.jpg" title="Nature 2" style="margin-bottom:2px;">
                            <h:graphicImage value="/resources/img/01_vitoria_hair.jpg"/>
                        </h:outputLink>

                        <h:outputLink value="#{request.contextPath}/images/nature3.jpg" title="Nature 3" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature3_small.jpg"/>
                        </h:outputLink>

                        <h:outputLink value="#{request.contextPath}/images/nature4.jpg" title="Nature 4" style="margin-bottom:2px;">
                            <h:graphicImage value="/images/nature4_small.jpg"/>
                        </h:outputLink>
                    </p:lightBox>

                </p:layoutUnit>

                <p:layoutUnit id="center" position="center" style="text-align:center;" scrollable="true">


                    <p:fieldset legend="2 Noites em Búzios por R$ 249" toggleable="true" toggleSpeed="500">
                        <h:panelGrid columns="2" cellpadding="10">

                            <p:imageSwitch effect="zoom" widgetVar="switcher" >
                                <ui:repeat value="#{layoutBean.images}" var="image">
                                    <p:graphicImage value="/resources/img/#{image}" />
                                </ui:repeat>
                            </p:imageSwitch>
                            <h:outputText
                                value="Viagem incrível para
                                Armação de Búzios! 2 Noites em Apartamento Standard
                                para 2 Pessoas na Pousada Gammel Dansk por R$ 249!." />
                        </h:panelGrid>
                    </p:fieldset>

                    <p:spacer width="30"/>

                    <p:fieldset legend="Pés e mãos de princesa com 70% Off!"  toggleSpeed="500"
                                toggleListener="{fieldsetBean.handleToggle}">
                        <h:panelGrid columns="2" cellpadding="10">

                            <p:graphicImage value="/resources/img/01_vitoria_hair.jpg" />
                            <h:outputText value="Deixe seus pés como o de uma cinderela!
                                          Pé + Mão + Esfoliação e Hidratação dos
                                          pés só R$ 21! Desconto de 70%!."/>;
                        </h:panelGrid>
                    </p:fieldset>


                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
</html>

